<template>
  <!-- 登录后所有页面的构建的基础 包含路由导航等 -->
  <v-app>
    <div class="hide-overflow" style="position: relative;">
      <ui-drawer />
      <v-toolbar
        style="padding-left: 200px;"
        fixed
        color="secondary"
        dark
        scroll-off-screen
        scroll-target="#scrolling-techniques"
      >
        <!-- <v-toolbar-side-icon></v-toolbar-side-icon> -->
        <v-toolbar-title>{{ title }}</v-toolbar-title>
        <v-spacer></v-spacer>

        <div class="mr-4">余额: {{ userInfo.balance }}元</div>

      <v-menu offset-y>
        <v-avatar slot="activator">
          <v-icon>account_circle</v-icon>
        </v-avatar>

        <div class="logout" @click="onLogout">
          <span class="las">注销</span>
        </div>
        <!-- <v-list>
          <v-list-item name="list-item" @click="onLogout" >
            <v-list-item-title></v-list-item-title>
          </v-list-item>
      </v-list> -->
      </v-menu>
      </v-toolbar>

      <div id="scrolling-techniques" class="scroll-y">
        <ui-view />
      </div>
    </div>

    <!-- <div class="progress-container" v-if="showProgress">
      <div class="progress elevation-2" @click="showProgress = false">
        <v-progress-circular :size="70" :width="5" color="white" indeterminate></v-progress-circular>
        <div class="white--text">{{ progressText }}</div>
      </div>
    </div>

    <v-snackbar v-model="snackbar" :timeout="timeout" top >
      {{ snackbarText }}
      <v-btn color="pink" flat round @click="snackbar = false">
        {{ $t('base.close') }}
      </v-btn>
    </v-snackbar> -->
  </v-app>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { User, Login } from '@/api';
// import { mapActions } from 'vuex';
import Cookie from 'js-cookie';
declare const $Vue: Vue;
@Component
export default class Home extends Vue {
  private title: string = "首页";
  private drawer: boolean = true;

  private userInfo: any = {
    balance: 0,
  }

  protected mounted() {
    this.registerTitle();
    this.registerBalance();

    this.getUserInfo();
  }

  private onLogout() {
    // this.handleLogout();
    this.$router.push({
      name: '登录',
    });
    Cookie.remove('seller_token');
    Cookie.remove('userId');
  }


  // 注册加载进度
  private registerTitle() {
    const $this = this;
    $Vue.$on("title", (data: { message: string }) => {
      $this.title = data.message;
    });
  }

  // 注册余额显示
  private registerBalance() {
    const $this = this;
    $Vue.$on("balance", (data: any) => {
      this.getUserInfo();
    });
  }

  /**
   * 获取用户信息
   */
  private async getUserInfo() {
    const params: any = {
      userId: Cookie.get("seller_userId"),
    };
    const { data } = await User.getUserBalance.r();
    console.log('getSingleUserInfo', data);
    if (data.result === 0) {
        this.userInfo.balance = data.data;
        sessionStorage.setItem('bjyx', data.data.toString());
    } else {
      $Vue.$emit('snackbar', {
        message: data.message,
      });
    }
  }

  /**
   * 处理用户注销
   */
  private async handleLogout() {
    const params: any = {
      ticket: Cookie.get('seller_token'),
    };
    const { data } = await Login.handleLogout.r(params);
    console.log('handleLogout', data);
    this.$router.push({
      name: '登录',
    });
    if (data.result === 0) {
    } else {
      $Vue.$emit('snackbar', {
        message: data.message,
      });
    }
  }
}
</script>


<style lang="less" scoped>
.logout {
  background: white;
  padding: 1rem;
  cursor: pointer;
}
</style>

